<!--
 * @Author: your name
 * @Date: 2021-02-21 15:09:57
 * @LastEditTime: 2021-02-23 16:27:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\virtual-tryon\index.vue
-->
<template>
  <div class="w1200auto">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem" />
    <div class="virtual_wrapper" id="virtual_wrapper">
        <div class="virtual relative mb100">
            <img :src="require('@/assets/image/virtual-tryon/Virtual_TryOn.png')" alt="" />
            <div class="absolute virtual_banner_box">
                <h3 class="size20 lh15 b virtual_banner_title">{{$t('Virtual Try-On')}}</h3>
                <p class="size12 lh15 b virtual_banner_txt">{{$t("Finding the perfect pair of glasses")}}</p>
                <p class="size12 lh15 b virtual_banner_txt">{{$t(" is easy with Virtual Try-On.")}}</p>
                <p class="size12 lh15 b virtual_banner_txt">{{$t("Our virtual glasses tool,lets you try on as many pairs")}}</p>
                <p class="size12 lh15 b virtual_banner_txt">{{$t("as you like, and accurately shows you how the frame")}}</p>
                <p class="size12 lh15 b virtual_banner_txt">{{$t("looks on your face.")}}</p>
            </div>
        </div>
        <div class="mb80">
            <h3 class="text_c size22 b mb10">{{$t("Find the Perfect Pair with Virtual Try-On")}}</h3>
            <h3 class="text_c size18 b mb50">{{$t("How It Works")}}</h3>
            <div class="virtual_box">
                <div class="virtual_left mr50">
                    <h3 class="size16 mb10 b">1.{{$t("Select the product list page")}}</h3>
                    <p class="size14 b mb10">{{$t("On this page, you can view all the glasses display or model try-on pictures,")}}</p>
                    <p class="size14 b mb10">{{$t("and you can also use your own photos to experience the wearing effects")}}</p>
                    <p class="size14 b mb10">{{$t("of all glasses on the list page.")}}</p>
                    <img class="mt20 virtual_img" :src="require('@/assets/image/virtual-tryon/Virtual_TryOn_1.png')" alt="">
                </div>
                <div class="virtual_right">
                    <h3 class="size16 mb10 b">2.{{$t("Enter the product details page")}}</h3>
                    <p class="size14 b mb10">{{$t("When you find a favorite product on the product list page,")}}</p>
                    <p class="size14 b mb10">{{$t("you can click Shop now to enter the product details page,")}}</p>
                    <p class="size14 b mb10">{{$t("where you can experience more try-on effects with these glasses.")}}</p>
                    <img class="mt20 virtual_img" :src="require('@/assets/image/virtual-tryon/Virtual_TryOn_2.png')" alt="">
                </div>
            </div>
        </div>
        <div>
            <h3 class="size24 text_c mb30">{{$t("Get started")}}</h3>
            <div class="virtual_started">
                <a class="virtual_btn b size16 text_c d-block lh15 mr50" href="/eyeglasses-women?category=19&sex=54&try=1">{{$t("Shop Women")}}</a>
                <a class="virtual_btn b size16 text_c d-block lh15" href="/eyeglasses-men?category=18&sex=53&try=1">{{$t("Shop Men")}}</a>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "~/components/common/Breadcrumb";
import { spliteParams } from '~/utils/Utils';
export default {
    async asyncData({ req, params, query, route, store }) {
        // 获取路由层级
        let arr = await spliteParams(route.fullPath);
        return {
            breadcrumbTtem: arr || []
        }
    },
    components: {
        BreadCrumb
    }
}
</script>

<style scoped>
    .virtual_banner_box {
        left: 40px;
        top: 80px;
    }
    .virtual_box {
        display: flex;
        justify-content: space-between;
    }
    .virtual_img {
        width: 100%;
    }
    .virtual_started {
        display: flex;
        justify-content: center;
    }
    .virtual_btn {
        width: 220px;
        height: 50px;
        line-height: 50px;
        background-color: #05a5f0;
        color: #fff !important;
    }
    .virtual_btn:hover {
        color: #f5f5f5!important;
    }
</style>